<template>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <a class="navbar-brand" href="index.html">Data Visualization</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="home.html">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="login.html">公共项目</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="project.html">个人项目</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.html?id=0">{{link}}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
      <button style="margin-left: 60px" class="btn btn-outline-info my-2 my-sm-0" @click="saveProject">保存</button>
      <a style="color: #fff; margin-left: 20px; cursor: pointer" href="project.html">{{username}}</a>
    </div>
  </nav>
</template>

<script>
import * as Util from '../js/util';
import Chart from '../chart/chart';

export default {
  name: 'Head',
  data () {
    return {
      link: '创建项目',
      username: '登录',
      id: '0'
    }
  },
  mounted: function () {
    this.username = Util.checkLogin() || '登录';
    this.id = Util.getParameterByName('id') || '0';
  },
  methods: {
    saveProject: function () {
      let $this = this;
      let src = Chart.instances;
      let project = Chart.project;
      project['data'] = Object.keys(src).map(function (k) {
        return {
          colId: k,
          key: src[k].key,
          describe: src[k].describe,
          url: src[k].url,
          name: src[k].name,
          option: src[k].option
        }
      });
      console.log(Chart);
      
      Util.postData('saveProject', {'id': this.id, 'data': project}, function (rst) {
        rst = rst.data;
        console.log(project);
        console.log('-----------------------------------');
        if (rst.status.code === 0 && parseInt($this.id) === 0) {
          alert('项目已创建成功，可在个人项目页面查看！');
          window.location.href = 'index.html?id=' + rst.data; 
        }
      });
    }
  }
}
/*
project:
  data: [
    {
      colId: '',
      key: '',
      describe: '',
      name: '',
      option: {}
    }
  ],
  layout: [
    {
      data: [{id: 'v1', col: '6'}, {id: 'v2', col: '6'}]
    }
  ]
*/
</script>
